import React from 'react';
import { connect } from 'dva';
import { Form, Icon, Input, Button } from 'antd';
import QueueAnim from 'rc-queue-anim';
import { COPY_RIGHT } from '../../../constants/constants.js';
import './index.less';

const FormItem = Form.Item;
const { create } = Form;

@connect((state) => {
  return { ...state.app, loading: state.loadingBar === 1 };
})
@create({
  mapPropsToFields: (props) => {
    const account = props.account;
    const formData = {};
    if (account !== null) {
      formData.username = { value: account.username };
    }
    return formData;
  },
})
export default class Login extends React.Component {
  loginHandler = () => {
    const { validateFields, getFieldsValue } = this.props.form;
    const { dispatch } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
      };
      dispatch({
        type: 'app/login',
        payload: data,
      });
    });
  }

  render = () => {
    const { loading } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <QueueAnim type="alpha" delay={300} duration={1000} className="login-layout">
        <QueueAnim delay={300} type={['right', 'left']} className="login-page" key="bg">
          <span className="login-title" key="title">WMS管理系统</span>
          <div className="login-panel" key="login">
            <div className="login-form-title">用户登录</div>
            <Form className="login-form">
              <FormItem hasFeedback>
                {getFieldDecorator('username', {
                  rules: [
                    { required: true, message: '请输入用户名!' },
                    { min: 5, message: '长度不能小于5个字符' },
                    { max: 20, message: '长度不能大于50个字符' },
                  ],
                })(
                  <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="用户名" />,
                )}
              </FormItem>
              <FormItem hasFeedback>
                {getFieldDecorator('password', {
                  rules: [
                    { required: true, message: '请输入密码!' },
                    { min: 5, message: '长度不能小于5个字符' },
                    { max: 50, message: '长度不能大于50个字符' },
                  ],
                })(
                  <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />,
                )}
              </FormItem>
              <FormItem style={{ marginBottom: 0 }}>
                <Button type="primary" loading={loading} onClick={this.loginHandler} className="login-form-button">
                  登录
                </Button>
              </FormItem>
            </Form>
          </div>
          <QueueAnim key="footer" className="login-footer" type="bottom">
            <p key="copyright">{COPY_RIGHT}</p>
          </QueueAnim>
        </QueueAnim>
      </QueueAnim>
    );
  }
}
